<template>
    <header>
        <router-link class="header-logo" to="/"></router-link>
        <div class="header-button">
            <div class="button">
                <router-link to="/login">
                    <span>登录</span>
                </router-link>
            </div>
            <div class="button">
                <router-link to="/register">
                    <span>注册</span>
                </router-link>
            </div>
        </div>
    </header>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
$header-height: 0.3rem;
$logo-width: 0.6rem;
$a-font-size: 0.08rem;

header {
    background: rgb(190, 190, 100);
    background-position: bottom;
    background-repeat: repeat no-repeat;
    background-size: auto cover;
    position: fixed;
    border: 0.1rem;
    border-radius: 0.1rem;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;

    .header-logo {
        background-image: url("@/assets/logo/logo.png");
        display: inline-block;
        width: $logo-width;
        height: $header-height;
        line-height: $logo-width;
        margin: 0 0.1rem;
        background-size: cover;
        background-repeat: no-repeat;
        vertical-align: top;
        background-position: center center;
    }

    .header-button {
        width: $logo-width*1.5;
        height: $header-height;
        float: right;
        display: flex;
        justify-content: space-around;
        align-items: center;


        .button {
            color: black;
            transition: color 0.25s;

            span {
                font-size: $a-font-size;
                font-weight: bold;
            }

            &:hover {
                text-decoration: none;
                color: #223c94;
                border-bottom: #979daf 3px solid;
            }
        }
    }
}

a {
    text-decoration: none;
}
</style>